<template>
	<view class="flex-col container">
	  <view class="flex-col section_3">
		<view class="justify-center group_4">
		  <image src="http://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/5ffd6bae7ebcc10011488b1c/600e64f6b58b8200118ce858/16115562469143797852.png" class="image_7" />
		  <text decode="decode" class="text_3">商户通</text>
		</view>
		<view class="flex-col group_5">
		  <view class="flex-col group_6">
			<view class="top flex-row">
			  <image src="/res/local/6afbc9cca6e73e8d6ff770d93eba7165.png" class="image_8" />
			  <text decode="decode" class="right-text text_4">请输入账号名称</text>
			</view>
			<view class="top flex-row section_5">
			  <image src="/res/local/0fd8cbab86c73efad98edadb1f81564d.png" class="image_9" />
			  <text decode="decode" class="right-text text_5">请输入密码</text>
			</view>
			<view class="flex-col items-center button">
			  <text decode="decode" class="text_6">登录</text>
			</view>
		  </view>
		  <view class="flex-row group_7">
			<view class="flex-row">
			  <image src="/res/local/aa3c74ad3f46187e1ac1ccc8de822bd5.png" class="left-image image_10" />
			  <text decode="decode" class="text_7">商户</text>
			</view>
			<view class="flex-row group_9">
			  <image src="/res/local/5d397467960b583a905e8956daa4e5d7.png" class="left-image" />
			  <text decode="decode" class="text_8">子商户</text>
			</view>
		  </view>
		</view>
		<view class="flex-col items-center group_10">
		  <text decode="decode" class="text_9">微信号快捷登陆</text>
		  <image src="/res/local/00bda7ff0fb4ae3f401f454c5ef30404.png" class="image_12" />
		</view>
		<view class="flex-col items-center group_11">
		  <text decode="decode" class="text_10">技术支持/问题反馈：it.support@tcl.com</text>
		</view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '', //用户/电话
				password: '', //密码
				labelPosition: 'left',
				border: false,
				systeminfo:null,
			}
		},
		onLoad() {

		},
		methods: {

			// 点击登录
			loginUp() {
				var _that = this
				if (_that.username == "") {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none',
						duration: 1000
					});
				} else if (_that.password == "") {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 1000
					});
				} else {
					_that.loginSever(_that.username, _that.password)
				}
			},
			loginSever(account, password) {
				var _that = this
				//这里请求接口
				_that._post_form('api/user/login', {
					account: account,
					password: password,
				}, (result) => {
					var userinfo = result.data.userinfo;
					userinfo.account = account;
					userinfo.password = password;

					_that.setUserInfo(userinfo);

					uni.setStorageSync('token', userinfo.token)
					uni.setStorageSync('user_id', userinfo.user_id)

					uni.switchTab({
						url: '/pages/home/index'
					});

				});
			}

		}
	}
</script>

<style lscoped lang="scss">
	view,
	text,
	image {
	  box-sizing: border-box;
	}
	
	text {
	  font-size: 24rpx;
	  color: rgb(3, 3, 3);
	  font-family: "PingFang SC", serif;
	}
	
	.left {
	  width: 39rpx;
	}
	
	.top {
	  flex: 0 0 auto;
	  padding: 20rpx 32rpx;
	  background-color: rgb(255, 255, 255);
	  border-radius: 48rpx;
	  border: solid 3rpx rgb(220, 220, 220);
	}
	
	.left-image {
	  width: 36rpx;
	  height: 36rpx;
	}
	
	.right-text {
	  color: rgb(205, 205, 205);
	  font-size: 30rpx;
	  line-height: 42rpx;
	}
	
	.flex-col {
	  display: flex;
	  flex-direction: column;
	}
	
	.container {
	  background-color: #f2f2f2;
	  width: 100vw;
	  height: 100vh;
	}
	
	.header {
	  flex: 0 0 auto;
	}
	
	.section_3 {
	  padding: 94rpx 80rpx 9rpx;
	  flex: 1 1 auto;
	  background-color: rgb(255, 255, 255);
	  overflow-y: auto;
	}
	
	.justify-center {
	  display: flex;
	  justify-content: center;
	}
	
	.group {
	  flex: 0 0 auto;
	  position: relative;
	}
	
	.justify-between {
	  display: flex;
	  justify-content: space-between;
	}
	
	.group_3 {
	  margin-top: 13rpx;
	  padding-left: 16rpx;
	  padding-right: 3rpx;
	  flex: 0 0 auto;
	}
	
	.group_4 {
	  flex: 0 0 auto;
	}
	
	.group_5 {
	  margin-top: 71rpx;
	  flex: 0 0 auto;
	}
	
	.items-center {
	  display: flex;
	  align-items: center;
	}
	
	.group_10 {
	  margin-top: 249rpx;
	  flex: 0 0 auto;
	}
	
	.group_11 {
	  margin-top: 90rpx;
	  flex: 0 0 auto;
	}
	
	.flex-row {
	  display: flex;
	  flex-direction: row;
	}
	
	.group_1 {
	  position: absolute;
	  left: 0;
	  top: 50%;
	  transform: translateY(-50%);
	}
	
	.text_1 {
	  line-height: 29rpx;
	}
	
	.group_2 {
	  position: absolute;
	  right: 0;
	  top: 50%;
	  transform: translateY(-50%);
	}
	
	.image_4 {
	  align-self: center;
	  width: 19rpx;
	  height: 34rpx;
	}
	
	.section_1 {
	  padding: 11rpx 23rpx 13rpx;
	  background-color: rgba(255, 255, 255, 0.6);
	  border-radius: 32rpx;
	  height: 64rpx;
	  border: solid 1rpx rgba(0, 0, 0, 0);
	}
	
	.image_7 {
	  width: 128rpx;
	  height: 87rpx;
	}
	
	.text_3 {
	  align-self: center;
	  color: rgb(51, 51, 51);
	  font-size: 40rpx;
	  line-height: 56rpx;
	}
	
	.group_6 {
	  flex: 0 0 auto;
	}
	
	.group_7 {
	  margin-top: 27rpx;
	  padding: 0 8rpx;
	  flex: 0 0 auto;
	}
	
	.text_9 {
	  color: rgb(153, 153, 153);
	  font-size: 26rpx;
	  line-height: 37rpx;
	}
	
	.image_12 {
	  margin-top: 16rpx;
	  width: 128rpx;
	  height: 128rpx;
	}
	
	.text_10 {
	  color: rgb(153, 153, 153);
	  line-height: 33rpx;
	}
	
	.section_6 {
	  margin-top: 28rpx;
	  flex: 0 0 auto;
	  background-color: rgb(0, 0, 0);
	  border-radius: 100rpx;
	  width: 134rpx;
	  height: 5rpx;
	}
	
	.image {
	  margin-bottom: 6rpx;
	  width: 33rpx;
	  height: 20rpx;
	}
	
	.text {
	  margin-left: 7rpx;
	  line-height: 29rpx;
	}
	
	.image_1 {
	  margin-left: 17rpx;
	  margin-bottom: 6rpx;
	  width: 30rpx;
	  height: 20rpx;
	}
	
	.image_2 {
	  margin-bottom: 3rpx;
	  width: 15rpx;
	  height: 26rpx;
	}
	
	.text_2 {
	  margin-left: 9rpx;
	  line-height: 29rpx;
	}
	
	.image_3 {
	  margin: 3rpx 0 3rpx 6rpx;
	  width: 53rpx;
	  height: 23rpx;
	}
	
	.imagewrapper {
	  align-self: center;
	}
	
	.section_2 {
	  margin-left: 23rpx;
	  background-color: rgba(0, 0, 0, 0.2);
	  width: 2rpx;
	  height: 37rpx;
	}
	
	.imagewrapper_1 {
	  margin-left: 22rpx;
	}
	
	.section_5 {
	  margin-top: 19rpx;
	}
	
	.button {
	  margin-top: 19rpx;
	  padding: 18rpx 0;
	  flex: 0 0 auto;
	  background-color: rgb(255, 69, 69);
	  border-radius: 40rpx;
	}
	
	.group_9 {
	  margin-left: 48rpx;
	}
	
	.image_5 {
	  width: 37rpx;
	  height: 13rpx;
	}
	
	.image_6 {
	  width: 39rpx;
	  height: 38rpx;
	}
	
	.image_8 {
	  margin: 3rpx 0 5rpx;
	  width: 31rpx;
	  height: 34rpx;
	}
	
	.text_4 {
	  margin-left: 16rpx;
	}
	
	.image_9 {
	  margin: 3rpx 0;
	  width: 31rpx;
	  height: 36rpx;
	}
	
	.text_5 {
	  margin-left: 18rpx;
	}
	
	.text_6 {
	  color: rgb(255, 255, 255);
	  font-size: 32rpx;
	  line-height: 45rpx;
	}
	
	.image_10 {
	  margin-top: 3rpx;
	}
	
	.text_7 {
	  margin-left: 11rpx;
	  color: rgb(51, 51, 51);
	  font-size: 28rpx;
	  line-height: 40rpx;
	  letter-spacing: -1rpx;
	}
	
	.text_8 {
	  margin-left: 11rpx;
	  color: rgb(51, 51, 51);
	  font-size: 28rpx;
	  line-height: 40rpx;
	  letter-spacing: -1rpx;
	}
</style>
